<!-- 考勤处理 -->
<template>
	<view class="handlePunchContainer">
		<!-- 第一行 -->
		<!-- <view class="radiosBox row1">
			<view>待处理异常</view>
			<view style="font-size:28rpx;color: #666;display: flex; align-items: center;">
				<text>暂无异常</text>
				<uni-icons color="#666" type="forward" size="18"></uni-icons>
			</view>
		</view> -->
		<!-- 第二行 申请 -->
		<view class="radiosBox row2">
			<view class="titleRow">申请</view>
			<view class="btnRow">
				<view class="btnItem" @click="goAddPage1">
					<!-- <image src="img/WechatIMG3419.png" style="width:100rpx;height: 100rpx;"></image> -->
					<view class="btnLogo" style="background-color: #64d940;">
						<!-- #ifdef APP-PLUS -->
						<image src="./img/WechatIMG3419.png" style="width:80rpx;height: 80rpx;" />
						<!-- #endif -->
						<!-- #ifdef MP-WEIXIN -->
						<img src="./img/WechatIMG3419.png" style="width:80rpx;height: 80rpx;" />
						<!-- #endif -->
						<!-- <uni-icons color="#fff" type="plusempty" size="28"></uni-icons> -->
					</view>
					<view class="redDiot">{{ numData.card_replacement_count }}</view>
					<!-- <view class="btnName">请假申请</view> -->
					<view class="btnName">补卡申请</view>
				</view>
				<view class="btnItem" @click="goAddPage2">
					<!-- <view class="redDiot">{{ numData.card_replacement_count }}</view> -->
					<view class="btnLogo">
						<!-- <uni-icons color="#fff" type="plusempty" size="28"></uni-icons> -->
						<!-- #ifdef APP-PLUS -->
						<image src="./img/WechatIMG3418.png" style="width:80rpx;height: 80rpx;" />
						<!-- #endif -->
						<!-- #ifdef MP-WEIXIN -->
						<img src="./img/WechatIMG3418.png" style="width:80rpx;height: 80rpx;" />
						<!-- #endif -->
					</view>
					<!-- <view class="btnName">补卡申请</view> -->
					<view class="btnName">请假申请</view>
				</view>
				
			</view>
		</view>
		<!-- 第二行 审批-->
		<view class="radiosBox row2" v-if="isAprovel1 || isAprovel2">
			<view class="titleRow">审批</view>
			<view class="btnRow">
				<view class="btnItem" @click="goHandle1" v-if="isAprovel1">
					<view class="redDiot">{{ numData.card_replacement_handle_count }}</view>
					<view class="btnLogo">
						<uni-icons color="#fff" type="compose" size="28"></uni-icons>
					</view>
					<view class="btnName">补卡审批</view>
				</view>
				<view class="btnItem" @click="goHandle2" v-if="isAprovel2">
					<view class="redDiot">{{ numData.leave_handle_count }}</view>
					<view class="btnLogo">
						<uni-icons color="#fff" type="compose" size="28"></uni-icons>
					</view>
					<view class="btnName">请假审批</view>
				</view>
			</view>
		</view>
		<!-- 第3行 汇总-->
		<!-- <view class="radiosBox row2" v-if="isAprovel3">
			<view class="titleRow">汇总</view>
			<view class="btnRow">
				<view class="btnItem"  @click="gocheckPunch" v-if="isAprovel3">
					<view class="btnLogo" style="background-color: #F4A029">
						<uni-icons color="#fff" type="search" size="28"></uni-icons>
					</view>
					<view class="btnName">考勤统计</view>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
export default {
	data() {
		return {
			token: '',
			member_id: '',
			company_id: '',
			nickname: '',
			avatarUrl: '',
			isAprovel1: false,
			isAprovel2: false,
			isAprovel3: false,
			numData: {}
		};
	},
	onLoad() {
		this.token = uni.getStorageSync('btlh_process_token') || '';
		this.member_id = uni.getStorageSync('btlh_process_member_id') || '';
		this.company_id = uni.getStorageSync('bthl_process_LoginCompanyId') || '';
		// 获取用户头像 名字
		this.nickname = uni.getStorageSync('btlh_process_nickname') || '';
		this.avatarUrl = uni.getStorageSync('btlh_process_avatarUrl') || '';
		this.getAprovelStatus();
	},
	onShow() {
		this.getAprovelNum();
	},
	methods: {
		gocheckPunch(){
			uni.navigateTo({
				url: `/packageAdmin/pages/punchCard/attendanceStatisticsClass`
			});
		},
		// 补卡审批
		goHandle1() {
			uni.navigateTo({
				url: `/packageAdmin/pages/punchCard/missExamine`
			});
		},
		// 请假审批
		goHandle2() {
			uni.navigateTo({
				url: `/packageAdmin/pages/punchCard/leaveExamine`
			});
		},
		// 补卡申请页面
		goAddPage1() {
			uni.navigateTo({
				url: `/packageAdmin/pages/punchCard/makeUpApply`
			});
		},
		// 请假申请页面
		goAddPage2() {
			uni.navigateTo({
				url: `/packageAdmin/pages/punchCard/attendanceApply`
			});
		},
		// 判断是不是审批人
		async getAprovelStatus() {
			const { data: res } = await this.$myRequest({
				url: 'ClockInApprove/is_approver',
				method: 'POST',
				data: {
					member_id: this.member_id,
					token: this.token,
					company_id: this.company_id
				}
			});
			if (res.code != 200)
				return uni.showToast({
					title: res.datas.msg,
					icon: 'none'
				});
			if (res.datas.is_department_head == '1') {
				this.isAprovel1 = true;
			}
			if (res.datas.is_department_head == '1' || res.datas.is_leave_admin == '1') {
				this.isAprovel2 = true;
			}
			if(res.datas.admin_state == '1' || res.datas.is_clockin_user == '1'){
				this.isAprovel3 = true;
			}
		},
		// 获取待审批数量
		async getAprovelNum() {
			const { data: res } = await this.$myRequest({
				url: 'ClockInApprove/index',
				method: 'POST',
				data: {
					member_id: this.member_id,
					token: this.token,
					company_id: this.company_id
				}
			});
			if (res.code != 200)
				return uni.showToast({
					title: res.datas.msg,
					icon: 'none'
				});
			this.numData = res.datas;
		}
	}
};
</script>

<style lang="scss" scoped>
.handlePunchContainer {
	width: 100%;
	height: 100vh;
	background-color: #f1f5f8;
	overflow: hidden;
	.radiosBox {
		width: 680rpx;
		margin: 0 auto;
		padding: 30rpx 30rpx;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 20rpx;
	}
	.row1 {
		font-size: 34rpx;
		color: #333;
		margin-top: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.row2 {
		margin-top: 30rpx;
		.titleRow {
			font-size: 36rpx;
			color: #000;
			font-weight: 700;
			margin-bottom: 40rpx;
		}
		.btnRow {
			display: flex;
			.btnItem {
				position: relative;
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-right: 70rpx;
				.redDiot {
					position: absolute;
					width: 40rpx;
					height: 40rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #fff;
					border-radius: 50%;
					background-color: #dd524d;
					top: -10rpx;
					right: -10rpx;
					font-size: 26rpx;
				}
				.btnLogo {
					background-color: #3297fe;
					display: flex;
					align-items: center;
					justify-content: center;
					width: 100rpx;
					height: 100rpx;
					border-radius: 20rpx;
				}
				.btnName {
					margin-top: 20rpx;
					font-size: 28rpx;
					color: #666;
				}
			}
		}
	}
}
</style>
